<template>
  <div id="videoBox">
    <div style="margin-bottom: 10px">
      <el-radio-group v-model="videoType">
        <el-radio-button label="video1">
          实时视频
        </el-radio-button>
        <el-radio-button label="video2">
          录像回放
        </el-radio-button>
      </el-radio-group>
    </div>
    <el-button @click="destroy">销毁</el-button>
    <el-button @click="init">重新创建</el-button>
    <el-button @click="closeVideo">关闭选中视频窗口</el-button>
    <el-button @click="snapshot">抓图</el-button>
    <template v-if="videoType === 'video2'">
      <el-button @click="pauseVideo">录像暂停</el-button>
      <el-button @click="continueVideo">录像继续</el-button>
    </template>
    <el-button @click="download">{{ startDownload ? '停止' : '开始' }}本地录像下载</el-button>
    <div>
      选择窗口: <el-input v-model="currentNum" type="number" style="width: 100px" />
      <el-button @click="selectWindow">确定</el-button>
    </div>
    <div v-if="videoType === 'video1'">
      修改实时视频路径：<el-input v-model="path" style="width: 500px" />
      <el-button @click="changeUrl">确定</el-button>
    </div>
    <div v-if="videoType === 'video2'">
      修改录像路径：<el-input v-model="path2" style="width: 500px" />
      <el-button @click="changeUrl">确定</el-button>
    </div>
    <div>
      测试遮挡：<el-select
        :options="[{label: '视频1', value: 1}, {label: '视频2', value: 2}, {label: '视频23', value: 4}]"
        dropdown-class-name="test_drop"
        style="width: 200px;"
      />
    </div>
    <div v-if="videoType === 'video1'" class="window1">
      实时视频1：<DHPlayer
        ref="video1"
        video-id="testPlayer"
        :path-list="pathList"
        :shield-class="['test_drop']"
        @getCurrentWindow="getCurrentWindow"
        @picCap="picCap"
        @getError="getError"
      />
    </div>
    <div v-else class="window1">
      录像回放：<DHPlayer
        ref="video2"
        :window-type="3"
        video-id="testPlayer2"
        :type="2"
        :path-list="pathList2"
        :shield-class="['test_drop']"
        @getCurrentWindow="getCurrentWindow"
        @replay="replay"
        @picCap="picCap"
        @getError="getError"
      />
    </div>
    <div v-show="errorTip" class="error-tip">错误提示：{{ errorTip }}</div>
  </div>
</template>
<script>
import DHPlayer from './DHPlayer.vue'
export default {
  components: {
    DHPlayer
  },
  data() {
    return {
      activeKey: '1',
      showModal: false,
      path: '',
      path2: '',
      startDownload: false,
      videoType: 'video1',
      currentNum: 0,
      errorTip: '',
      pathList: ['rtsp://10.35.239.103:9090/dss/monitor/params?cameraid=1000021%240&substream=1&trackID=701 ',
        {
          path: 'rtsp://10.35.238.43:9100/dss/monitor/param/cameraid=1009412$1$0$1%240%26substream=1?token=105',
          redirect: false
        }
      ], // 实时预览测试
      realTimeList: [{
        channelId: '1000032$1$0$0'
      }],
      pathList2: [{ // 录像测试
        startTime: 1636994047,
        endTime: 1637001247,
        path: 'rtsp://10.35.239.250:9090/dss/playback/param?cameraid=1000544%240&substream=1&type=2&recordtype=1&begintime=1636994047&endtime=1637001247'
      }],
      videoPlayList: [{
        'channelId': '1000014$1$0$0',
        'streamType': '1',
        'type': 'hls',
        'recordType': '1',
        'startTime': '1637715062',
        'endTime': '1637769062',
        'recordSource': '2'
      }]
    }
  },
  watch: {
    videoType(val, oldVal) {
      this.currentNum = 0
      this.$nextTick(() => {
        this.$refs[val].initVideo()
      })
    }
  },
  methods: {
    getError(error) {
      this.errorTip = error
    },
    replay(snum) { // 录像回放播放结束监听，demo中是重新再放一遍，用户可根据自身需求使用改方法
      this.$refs[this.videoType].setPlayback(this.pathList2[snum], snum)
    },
    // 修改url
    changeUrl() {
      if (this.videoType === 'video1') {
        this.pathList[0] = this.path
        this.$refs[this.videoType].setRealTime({
          path: this.path,
          snum: 0
        })
      } else {
        this.pathList2[0] = {
          url: this.path2
        }
        this.$refs[this.videoType].setPlayback({
          path: this.path2
        }, 0)
      }
    },
    // 本地录像下载
    download() {
      this.startDownload = !this.startDownload
      this.$refs[this.videoType].videoPlayer.localRecordDownload(this.currentNum)
    },
    downloadFile(url, name = new Date().valueOf()) {
      var a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      const clickEvent = document.createEvent('MouseEvents')
      clickEvent.initEvent('click', true, true)
      a.dispatchEvent(clickEvent)
    },
    picCap({
      path
    }) {
      this.downloadFile(path, 'image_' + new Date().valueOf())
    },
    // 抓图
    snapshot() {
      this.$refs[this.videoType].videoPlayer.snapshot(this.currentNum)
    },
    // 选择窗口
    selectWindow() {
      this.$refs[this.videoType].videoPlayer.chooseWindow(this.currentNum)
    },
    // 获取当前选中的窗口
    getCurrentWindow(num) {
      this.currentNum = num
    },
    // 关闭视频
    closeVideo() {
      this.$refs[this.videoType].videoPlayer.closeVideo({
        snum: this.currentNum,
        isAll: false
      })
    },
    // 录像暂停
    pauseVideo() {
      this.$refs[this.videoType].videoPlayer.controlPlayback({
        snum: this.currentNum,
        state: 0
      })
    },
    // 继续录像
    continueVideo() {
      this.$refs[this.videoType].videoPlayer.controlPlayback({
        state: 1
      })
    },
    // 销毁窗口
    destroy() {
      this.$refs[this.videoType].destroy()
    },
    // 重建
    init() {
      this.$refs[this.videoType].initVideo()
    }
  }
}
</script>
<style>
    .window1,
    .window2 {
        float: left;
        margin-top: 20px;
        margin-left: 20px;
    }

    #videoBox {
        margin-left: 20px;
    }

    #videoBox button {
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .error-tip {
        clear: both;
        color: red;
        margin-left: 20px;
    }

    #testPlayer,
    #testPlayer2 {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
    }
</style>
